<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
     String path=request.getContextPath();
      String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="<%=basePath%>layui/css/layui.css" media="all"/>
<script src="<%=basePath%>layui/layui.js"></script>
</head>
<body>
<div class="demoTable">
  搜索房屋：
  <div class="layui-inline">
   <input class="layui-input" name="title" id="demoReload" autocomplete="off" >
   </div>
    <span class="input-group-btn">
     所在城市： <select name="cityid" id="key_type"  lay-filter="aihao">
        <option value=""selected=""></option>
        <option value="1">武汉</option>
        <option value="2">北京</option>
        <option value="3">深圳</option>
        <option value="4">广州</option>
        <option value="5">上海</option>
      </select>
    </span>
  <button class="layui-btn" data-type="reload">搜索</button>
</div>
<table id="demo" lay-filter="test"></table>
<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0; display: none">
<form class="layui-form" action="" method="post">
<div class="layui-form-item">
    <div class="layui-input-block">
      <input type="hidden" name="homeid" id="homeid" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">房屋标题</label>
    <div class="layui-input-block">
      <input type="text" name="title" id="title" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">价格</label>
    <div class="layui-input-inline">
      <input type="text" name="price" id="price" required lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">单位：元</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">区域面积</label>
    <div class="layui-input-inline">
      <input type="text" name="area" id="area" required lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">单位：m²</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">房型</label>
     <div class="layui-input-block">
      <select name="hometype" lay-filter="aihao">
        <option value=""selected=""></option>
        <option value="1">一室</option>
        <option value="2">二室</option>
        <option value="3">三室</option>
        <option value="4">四室</option>
        <option value="5">五室</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">出租方式</label>
     <div class="layui-input-block">
      <input type="radio" name="homeway" value="1" title="整租" checked="">
      <input type="radio" name="homeway" value="2" title="合租">
      <input type="radio" name="homeway" value="禁" title="禁用" disabled="">
    </div>
  </div>
 <div class="layui-form-item">
    <label class="layui-form-label">时间方式</label>
   <div class="layui-input-block">
      <input type="radio" name="timeway" value="1" title="晚" checked="">
      <input type="radio" name="timeway" value="2" title="月">
      <input type="radio" name="timeway" value="3" title="年">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">城市表id</label>
    <div class="layui-input-block">
      <select name="cityid" lay-filter="aihao">
        <option value=""selected=""></option>
        <option value="1">武汉</option>
        <option value="2">北京</option>
        <option value="3">深圳</option>
        <option value="4">广州</option>
        <option value="5">上海</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">详细地址</label>
    <div class="layui-input-block">
      <input type="text" name="address" id="address" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">房屋说明</label>
    <div class="layui-input-block">
      <input type="text" name="homemark" id="homemark" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">homeState</label>
    <div class="layui-input-block">
      <input type="text" name="homestate" id="homestate" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">配套设施</label>
    <div class="layui-input-block">
      <input type="text" name="homeequipment" id="homeequipment" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">交通情况</label>
    <div class="layui-input-block">
      <input type="text" name="trafficsituation" id="trafficsituation" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">封面图</label>
    <div class="layui-input-block">
      <input type="text" name="coverimg" id="coverimg" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户id</label>
    <div class="layui-input-block">
      <select name="userid" lay-filter="aihao">
        <option value=""selected=""></option>
        <option value="101">小猪</option>
        <option value="102">小花</option>
        <option value="103">管理员</option>
        <option value="104">笑笑b</option>
        <option value="105">嘻嘻嘻</option>
        <option value="106">巴拉巴拉</option>
      </select>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">zuserId</label>
    <div class="layui-input-block">
      <input type="text" name="zuserid" id="zuserid"  placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn layui-btn-primary" lay-submit="" lay-filter="demo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</div>


<div class="site-demo-button" id="layerDemo1" style="margin-bottom: 0; display: none">
<form class="layui-form" action="" method="post">
  <div class="layui-form-item">
    <label class="layui-form-label">房屋标题</label>
    <div class="layui-input-block">
      <input type="text" name="title"  required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">价格</label>
    <div class="layui-input-inline">
      <input type="text" name="price"  required lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">单位：元</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">区域面积</label>
    <div class="layui-input-inline">
      <input type="text" name="area"  required lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">单位：m²</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">房型</label>
    <div class="layui-input-block">
      <select name="hometype" lay-filter="aihao">
        <option value=""selected=""></option>
        <option value="1">一室</option>
        <option value="2">二室</option>
        <option value="3">三室</option>
        <option value="4">四室</option>
        <option value="5">五室</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">出租方式</label>
    <div class="layui-input-block">
      <input type="radio" name="homeway" value="1" title="整租" >
      <input type="radio" name="homeway" value="2" title="合租">
      <input type="radio" name="homeway" value="禁" title="禁用" disabled="">
    </div>
  </div>
 <div class="layui-form-item">
    <label class="layui-form-label">时间方式</label>
     <div class="layui-input-block">
      <input type="radio" name="timeway" value="1" title="晚" checked="">
      <input type="radio" name="timeway" value="2" title="月">
      <input type="radio" name="timeway" value="3" title="年">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">城市表id</label>
    <div class="layui-input-block">
      <select name="cityid" lay-filter="aihao">
        <option value=""></option>
        <option value="1">武汉</option>
        <option value="2">北京</option>
        <option value="3">深圳</option>
        <option value="4">广州</option>
        <option value="5">上海</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">详细地址</label>
    <div class="layui-input-block">
      <input type="text" name="address"  required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">房屋说明</label>
    <div class="layui-input-block">
      <input type="text" name="homemark"  required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">homeState</label>
    <div class="layui-input-block">
      <input type="text" name="homestate"  required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">配套设施</label>
    <div class="layui-input-block">
      <input type="text" name="homeequipment"  required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">交通情况</label>
    <div class="layui-input-block">
      <input type="text" name="trafficsituation"  required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">封面图</label>
    <div class="layui-input-block">
      <input type="text" name="coverimg"  required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  
   <div class="layui-form-item">
    <label class="layui-form-label">用户id</label>
    <div class="layui-input-block">
      <select name="userid" lay-filter="aihao">
        <option value="" selected=""></option>
        <option value="101">小猪</option>
        <option value="102">小花</option>
        <option value="103">管理员</option>
        <option value="104">笑笑b</option>
        <option value="105">嘻嘻嘻</option>
        <option value="106">巴拉巴拉</option>
      </select>
    </div>
  </div>
  

  <div class="layui-form-item">
    <label class="layui-form-label">zuserId</label>
    <div class="layui-input-block">
      <input type="text" name="zuserid"   placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn layui-btn-primary" lay-submit="" lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</div>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">新增</button>
  </div>
</script> 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script type="text/javascript">
function createTime(v){
	var date = new Date(v);
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    m = m<10?'0'+m:m;
    var d = date.getDate();
    d = d<10?("0"+d):d;
    var h = date.getHours();
    h = h<10?("0"+h):h;
    var M = date.getMinutes();
    M = M<10?("0"+M):M;
    var str = y+"-"+m+"-"+d+" "+h+":"+M;
    return str;
}
layui.use('table', function(){
	  var table = layui.table;
	  var $=layui.jquery;
	  table.render({
		toolbar: '#toolbarDemo',
	    elem: '#demo',
	    //height: 312,
	    url: 'homeinfo/queryall', //数据接口
	    page: true, //开启分页
	    id:"testReload",
	    limit:10,
	    limits:[10,20,30,50],
	    cols: [[ //表头
	      {type: 'checkbox', fixed: 'left'},
	      {field: 'homeId', title: 'ID', width:80, sort: true, fixed: 'left'},
	      {field: 'title', title: '标题', width:100},
	      {field: 'price', title: '价格', width:80, sort: true},
	      {field: 'area', title: '区域面积', width:80},
	      {field: 'homeType', title: '房型', width: 80,templet:"#hometype1"},
	      {field: 'homeWay', title: '出租方式', width: 80},
	      {field: 'timeWay', title: '时间方式', width: 80},
	      {field: 'cityName', title: '所在城市', width: 80},
	      {field: 'address', title: '详细地址', width: 200 },
	      {field: 'homeMark', title: '房屋说明', width: 135},
	      {field: 'homeState', title: 'homestate', width: 135, sort: true},
	      {field: 'homeequipment', title: '配套设施', width: 135 },
	      {field: 'trafficSituation', title: '交通情况', width: 135 },
	      {field: 'coverimg', title: '封面图', width: 135, templet:'<div><img src="/img/{{d.coverimg}}"></div>'},
	      {field: 'userName', title: '用户表id (发布人)', width: 135, sort: true},
	      {field: 'makeDate', title: '创建时间', width: 135,templet: function (d){
                                                return createTime(d.makeDate);
          }     },
	      {field: 'zuserid', title: 'zuserid', width: 135},
	      {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
	    ]],
	    done: function(res, page, count){
			//如果是异步请求数据方式，res即为你接口返回的信息。
			//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
			
			//分类显示中文名称
			$("[data-field='homeType']").children().each(function(){
					if($(this).text()=='1'){
					   $(this).text("一室")
					}else if($(this).text()=='2'){
					   $(this).text("两室")
					}else if($(this).text()=='3'){
					   $(this).text("三室")
					}else if($(this).text()=='4'){
					   $(this).text("四室")
					}else if($(this).text()=='5'){
						$(this).text("五室")
					}
			});
			$("[data-field='timeWay']").children().each(function(){
				if($(this).text()=='1'){
				   $(this).text("晚")
				}else if($(this).text()=='2'){
				   $(this).text("月")
				}else if($(this).text()=='3'){
					$(this).text("年")
				}
    });
			$("[data-field='homeWay']").children().each(function(){
				if($(this).text()=='1'){
				   $(this).text("合租")
				}else if($(this).text()=='2'){
				   $(this).text("整租")
				}
    });
			$("[data-field='homeMark']").children().each(function(){
				if($(this).text()=='1'){
				   $(this).text("地下室")
				}else if($(this).text()=='2'){
				   $(this).text("楼房")
				}
    });
	    }
	  });
table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'getCheckData':
        var data = checkStatus.data;
        layer.alert(JSON.stringify(data));
      break;
      case 'getCheckLength':
        var data = checkStatus.data;
        layer.msg('选中了：'+ data.length + ' 个');
      break;
      case 'isAll':
        //layer.msg(checkStatus.isAll ? '全选': '未全选');
        layui.use('layer', function(){
        	  var layer = layui.layer;
        	  var $=layui.jquery;
        	      layer.open({
        	          type: 1
        	          ,offset:"auto" 
        	          ,content: $("#layerDemo1")
        	          ,area:"600px"
        	          ,btn: '关闭全部'
        	          ,btnAlign: 'c' //按钮居中
        	          ,shade: 0 //不显示遮罩
        	          ,yes: function(){
        	            layer.closeAll();
        	          }
        	        });
         });
      break;
    };
  });
//监听行工具事件
table.on('tool(test)', function(obj){
  var data = obj.data;//当前行的数据
  //obj.event:表头的参数对象值
  if(obj.event === 'del'){
    layer.confirm('真的删除行么', function(index){
      $.ajax({
    	  type:'post',
    	  url:'homeinfo/del',
    	  data:{"homeid":data.homeId},
    	  success:function(msg){
    		  layer.msg("删除成功");
    			  table.reload('testReload', {
    			        page: {
    			          curr: 1 //重新从第 1 页开始
    			        },
    			      });
    	  }
      });
      layer.close(index);
    });
  } else if(obj.event === 'edit'){
    layui.use('layer', function(){
    	  var layer = layui.layer;
    	  var $=layui.jquery;
    	  $("#homeid").val(data.homeId);
    	  $("#title").val(data.title);
    	  $("#price").val(data.price);
    	  $("#area").val(data.area);
    	  $("#hometype").val(data.homeType);
    	  $("#homeway").val(data.homeWay);
    	  $("#timeway").val(data.timeWay);
    	  $("#cityid").val(data.cityid);
    	  $("#address").val(data.address);
    	  $("#homemark").val(data.homeMark);
    	  $("#homestate").val(data.homeState);
    	  $("#homeequipment").val(data.homeequipment);
    	  $("#trafficsituation").val(data.trafficSituation);
    	  $("#coverimg").val(data.coverimg);
    	  $("#userid").val(data.userid);
    	  $("#zuserid").val(data.zuserid);
    	      layer.open({
    	          type: 1
    	          ,offset:"auto" 
    	          ,content: $("#layerDemo")
    	          ,area:"600px"
    	          ,btn: '关闭全部'
    	          ,btnAlign: 'c' //按钮居中
    	          ,shade: 0 //不显示遮罩
    	          ,yes: function(){
    	            layer.closeAll();
    	          }
    	        });
    	      
     }), 
    function(value, index){
    	layer.close(index);
    };
  }
});

var $ = layui.$, active = {
	    reload: function(){
	      var demoReload = $('#demoReload').val();
	      var keyType=$("#key_type option:selected").val();
	      alert(1);
	      //执行重载
	      table.reload('testReload', {
	        page: {
	          curr: 1 //重新从第 1 页开始
	        }
	        ,where: {
	            name: demoReload,
	            cityid:keyType
	        }
	      });
	    }
	  };
$('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
});
layui.use('form', function(){
	 var form = layui.form;
	 var $=layui.jquery;
	 //提交监听
	 form.on('submit(demo1)', function(data){
		 $.ajax({
			 type:"post",
			 data:data.field,
			 url:"homeinfo/add",
			 success:function(msg){
				 layer.msg(msg.msg);
			 }
		 })
	 });
	 form.on('submit(demo)',function(data){
		 $.ajax({
			 type:"post",
			 data:data.field,
			 url:"homeinfo/update",
			 success:function(msg){
				 layer.msg(msg.msg);
			 }
		 })
	 })
});
</script>
</body>
</html>